<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="zh-CN">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购-会员注册</title>
    <!-- 页面标签左边的小图标 -->
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- 基础样式与通用样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <!-- 列表页样式 -->
    <link rel="stylesheet" href="./css/register.css">
    <!-- 字体图标 -->
    <link rel="stylesheet" href="./fonts/font_3838083_58ef9lwh3ec/iconfont.css">
</head>

<body>
    <!-- 头部制作 start -->
    <!-- 顶部的快捷导航栏shortcut -->
    <section class="shortcut">
        <div class="w">
            <!-- 顶部左侧登录板块 -->
            <div class="fl">品优购欢迎您！请登录<a href="#">免费注册</a></div>
            <!-- 顶部右侧快捷导航栏 -->
            <div class="fr">
                <ul>
                    <li>
                        <a href="#" target="_blank">我的订单</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">我的品优购</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">品优购会员</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">企业采购</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">关注品优购</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">客户服务</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">网站导航</a>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 头部板块header -->
    <header class="head w">
        <!-- 头部左侧logo -->
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>
        <!-- 头部中间搜索大栏 -->
        <section>
            <!-- 搜索栏之搜索板块 -->
            <div>
                <!-- 搜索栏 -->
                <input type="text" placeholder="语言开发">
                <!-- 搜索按钮 -->
                <a href="#" name="sear">搜索</a>
            </div>
            <!-- 搜索栏之热词板块 -->
            <div class="hotwords">
                <ul>
                    <li><a href="#">优惠购首发</a></li>
                    <li><a href="#">亿元优惠</a></li>
                    <li><a href="#">9.9元团购</a></li>
                    <li><a href="#">美满99减30</a></li>
                    <li><a href="#">办公用品</a></li>
                    <li><a href="#">电脑</a></li>
                    <li><a href="#">通信</a></li>
                </ul>
            </div>
        </section>
        <!-- 头部右侧购物车 -->
        <div class="shopcar">
            <!-- <p><a href="#"></a></p> -->
            <a href="#">
                <p></p>
            </a>
            <input type="button" value="我的购物车">
            <div class="shopcar_number">913</div>
        </div>
    </header>
    <!-- 头部制作 end -->

    <!-- 注册制作 start -->
    <div class="register w clearfix">
        <!-- 注册大栏上方灰色栏 -->
        <div class="register_head">
            <!-- 左方文字 -->
            <div class="register_head_lf">注册新用户</div>
            <div class="register_head_rf">我有账号，去<a href="#">登陆</a></div>
            <!-- 右方文字 -->
        </div>
        <!-- 注册栏之按钮板块 -->
        <form action="">
            <ul>
                <li><label for="phone">手机号：</label><input type="text" placeholder="请输入您的手机号" name="phone"></li>
                <li><label for="">短信验证码：</label><input type="text" placeholder="请输入手机验证码"></li>
                <li><label for="">登录密码：</label><input type="text" placeholder="请输入您的登录密码"></li>
                <li>安全程度<i>弱</i><i>中</i><i>强</i></li>
                <li><label for="">确认密码：</label><input type="text" placeholder="请却您的登录密码"></li>
            </ul>
        </form>
    </div>
    <!-- 注册制作 end -->

    <!-- 底部制作 start -->
    <!-- 底部板块footer -->
    <footer class="foot clearfix">
        <section class="w">
            <!-- 服务板块mod_service -->
            <div class="mod_service">
                <ul>
                    <!-- 正品保障 -->
                    <li>
                        <!-- 服务板块左边的文字图标 -->
                        <div class="mod_service_fonts">&#xe98b;</div>
                        <!-- 服务板块右边的上下行文字 -->
                        <div class="mod_service_content">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <!-- 急速物流 -->
                    <li>
                        <!-- 服务板块左边的文字图标 -->
                        <div class="mod_service_fonts">&#xe999;</div>
                        <!-- 服务板块右边的上下行文字 -->
                        <div class="mod_service_content">
                            <h4>急速物流</h4>
                            <p>急速物流，急速送达</p>
                        </div>
                    </li>
                    <!-- 无忧售后 -->
                    <li>
                        <!-- 服务板块左边的文字图标 -->
                        <div class="mod_service_fonts">&#xe678;</div>
                        <!-- 服务板块右边的上下行文字 -->
                        <div class="mod_service_content">
                            <h4>无忧售后</h4>
                            <p>7天无理由退换货</p>
                        </div>
                    </li>
                    <!-- 特色服务 -->
                    <li>
                        <!-- 服务板块左边的文字图标 -->
                        <div class="mod_service_fonts">&#xe99b;</div>
                        <!-- 服务板块右边的上下行文字 -->
                        <div class="mod_service_content">
                            <h4>特色服务</h4>
                            <p>私人定制家电套餐</p>
                        </div>
                    </li>
                    <!-- 帮助中心 -->
                    <li>
                        <!-- 服务板块左边的文字图标 -->
                        <div class="mod_service_fonts">&#xe677;</div>
                        <!-- 服务板块右边的上下行文字 -->
                        <div class="mod_service_content">
                            <h4>帮助中心</h4>
                            <p>您的购物指南</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 帮助板块 mod_help -->
            <div class="mod_help">
                <!-- 购物指南 -->
                <dl>
                    <dt>购物指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <!-- 配送方式 -->
                <dl>
                    <dt>配送方式</dt>
                    <dd><a href="#">上门自提</a></dd>
                    <dd><a href="#">211限时达</a></dd>
                    <dd><a href="#">配送服务查询</a></dd>
                    <dd><a href="#">配送费收取标准</a></dd>
                    <dd><a href="#">海外配送</a></dd>
                </dl>
                <!-- 支付方式 -->
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="#">货到付款</a></dd>
                    <dd><a href="#">在线支付</a></dd>
                    <dd><a href="#">分期付款</a></dd>
                    <dd><a href="#">邮局汇款</a></dd>
                    <dd><a href="#">公司转账</a></dd>
                </dl>
                <!-- 售后服务 -->
                <dl>
                    <dt>售后服务</dt>
                    <dd><a href="#">售后政策</a></dd>
                    <dd><a href="#">价格保护</a></dd>
                    <dd><a href="#">退款说明</a></dd>
                    <dd><a href="#">返修/退换货</a></dd>
                    <dd><a href="#">取消订单</a></dd>
                </dl>
                <!-- 特色服务 -->
                <dl>
                    <dt>特色服务</dt>
                    <dd><a href="#">夺宝岛</a></dd>
                    <dd><a href="#">DIY装机</a></dd>
                    <dd><a href="#">延保服务</a></dd>
                    <dd><a href="#">品优购E卡</a></dd>
                    <dd><a href="#">品优购通信</a></dd>
                </dl>
                <!-- 关于我们 -->
                <dl>
                    <dt>关于我们</dt>
                    <dd><img src="./images/wx.jpg" alt=""></dd>
                    <dd>欢迎咨询客服</dd>
                </dl>
            </div>
            <!-- 版权板块 mod_copyright -->
            <div class="mod_copyright">
                <div class="w">
                    <!-- 底部导航 -->
                    <div class="bottom_nav">
                        <ul>
                            <li><a href="#">关于我们</a></li>
                            <li><a href="#">联系我们</a></li>
                            <li><a href="#">联系客服</a></li>
                            <li><a href="#">商家入驻</a></li>
                            <li><a href="#">营销中心</a></li>
                            <li><a href="#">手机品优购</a></li>
                            <li><a href="#">友情链接</a></li>
                            <li><a href="#">销售联盟</a></li>
                            <li><a href="#">品优购社区</a></li>
                            <li><a href="#">品优购公益</a></li>
                            <li><a href="#">English Site</a></li>
                            <li><a href="#">Contact U</a></li>
                        </ul>
                    </div>
                    <!-- 地址与版权 -->
                    <div class="copy">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱:
                        zhanghj+itcast.cn<br>
                        京ICP备08001421号京公网安备110108007702</div>
                </div>
            </div>
        </section>
    </footer>
    <!-- 底部制作 end -->
</body>

</html>